<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';

import { MdiMinus2, MdiPlus2, MdiQuestion } from '@vben/icons';

import { Button, Checkbox, Popover, RangePicker } from 'ant-design-vue';
import dayjs from 'dayjs';

const props = defineProps({
  // 选中的星期
  selectWeek: {
    type: Array,
    default: () => [],
  },
  showScope: {
    type: Boolean,
    default: true,
  },
  scopeChecked: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['change', 'update:scopeChecked']);
// 选择的日期天数
const selectedDays = ref(0);
// 日期范围
const dateRange = ref<[string, string][]>([['', '']]);
// 是否适用所有时间段
const checked = computed({
  get() {
    return props.scopeChecked;
  },
  set(newValue) {
    emit('update:scopeChecked', newValue);
  },
});

// 禁用当天之前的日期
const disabledDate = (current: dayjs.Dayjs) => {
  return current && current < dayjs().startOf('day');
};

// 选择日期范围
const dateChange = (e: any, index: number) => {
  dateRange.value[index] = e.map((item: any) =>
    dayjs(item).format('YYYY-MM-DD'),
  );
};

// 使用所有时间段的开关
const checkChange = (e: any) => {
  checked.value = e.target.checked;
  const now = dayjs().format('YYYY-MM-DD');
  dateRange.value = checked.value ? [[now, now]] : [['', '']];
};

// 重置选择
const reset = () => {
  const now = dayjs().format('YYYY-MM-DD');
  dateRange.value = [[now, now]];
  checked.value = false;
};

const allDate = ref();
// 监听 dateRange 和 props.selectWeek 的变化
watch(
  [dateRange, () => props.selectWeek],
  () => {
    const allDates = new Set<string>();
    for (const [start, end] of dateRange.value) {
      if (start && end) {
        let current = dayjs(start);
        const endDate = dayjs(end);
        while (
          current.isSame(endDate, 'day') ||
          current.isBefore(endDate, 'day')
        ) {
          const dayOfWeek = current.day();
          // 检查当前日期的星期是否在 selectWeek 中
          if (props.selectWeek.includes(dayOfWeek.toString())) {
            allDates.add(current.format('YYYY-MM-DD'));
          }
          current = current.add(1, 'day');
        }
      }
    }
    allDate.value = [...allDates];
    selectedDays.value = allDates.size;
    emit('change', allDate.value);
  },
  { deep: true },
);

onMounted(() => {
  // 默认选择当天
  const now = dayjs().format('YYYY-MM-DD');
  dateRange.value = [[now, now]];
});
</script>

<template>
  <div class="flex flex-wrap items-center px-5 py-3 pb-4">
    <div class="flex w-full items-center">
      已选择
      <span class="text-primary mx-1">{{ checked ? 0 : selectedDays }}</span>
      天
      <Button class="ml-3 h-auto w-auto p-0" type="link" @click="reset">
        重置
      </Button>
    </div>
    <div
      v-for="(item, index) in dateRange"
      :key="index"
      class="mt-3 flex w-full flex-wrap items-center"
    >
      <p class="w-[90px] py-1 pr-2 opacity-60">
        {{ index === 0 ? '适用日期' : '' }}
      </p>
      <!-- v-model:value="item" -->
      <RangePicker
        :disabled="checked"
        :disabled-date="disabledDate"
        :value="
          item[0] && item[1]
            ? [dayjs(item[0], 'YYYY-MM-DD'), dayjs(item[1], 'YYYY-MM-DD')]
            : undefined
        "
        @change="dateChange($event, index)"
      />
      <MdiMinus2
        v-if="dateRange.length !== 1"
        class="text-primary ml-2 cursor-pointer text-3xl"
        @click="() => dateRange.splice(index, 1)"
      />
      <MdiPlus2
        v-if="index === dateRange.length - 1"
        class="text-primary ml-2 cursor-pointer text-3xl"
        @click="() => dateRange.push(['', ''])"
      />
      <div v-if="showScope" class="ml-3">
        <Checkbox
          v-if="index === 0"
          v-model:checked="checked"
          @change="checkChange"
        >
          <div class="flex items-center">
            <span class="text"> 适用所有时间段 </span>
            <Popover>
              <template #content>
                <p class="text">1.修改时间为2年(365*2)的房态房量数据</p>
                <p class="text">*注意不同批量修改的天数不同。</p>
                <p class="text">
                  2.并修改是否可订的默认值(在未设置到天的值时生效)
                </p>
              </template>
              <MdiQuestion class="text-base" />
            </Popover>
          </div>
        </Checkbox>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.text {
  color: hsl(var(--card-foreground));
}
</style>
